<template>
  <div class="lesson-detail">
    <van-nav-bar
        title="课时详情"
        left-text="返回"
        left-arrow
        @click-left="router.go(-1)"
    />

    <div class="detail-content">
      <div class="basic-info">
        <h3>{{ courseTypeText }}</h3>
        <p class="time">
          <van-icon name="clock-o" />
          {{ formatTime(lesson.startTime) }} - {{ formatTime(lesson.endTime) }}
        </p>
        <van-tag :type="statusTagType">{{ statusText }}</van-tag>
      </div>

      <van-cell-group>
        <van-cell title="教练" :value="lesson.coachName || '未知教练'" />
        <van-cell title="车牌号" :value="lesson.plateNumber || '未分配'" />
        <van-cell title="预约人数" :value="`${lesson.currentStudents}/${lesson.maxStudents}`" />
        <van-cell title="课程状态" :value="statusText" />
      </van-cell-group>

      <div class="remark" v-if="lesson.remark">
        <h4>备注</h4>
        <p>{{ lesson.remark }}</p>
      </div>
    </div>

    <div class="action-bar">
      <van-button
          round
          block
          type="primary"
          :disabled="lesson.status !== '1'"
          @click="handleReserve"
      >
        {{ lesson.status === '1' ? '立即预约' : '不可预约' }}
      </van-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, ref} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {Toast} from 'vant'
import {getLessonAPI, reserveLesson} from '@/api/lesson'
import type {Lesson} from '@/api/lesson.ts/types'
import {formatTime} from '@/utils/date'

const route = useRoute()
const router = useRouter()

const lesson = ref<Lesson>({
  id: 0,
  userId: 0,
  plateNumber: '',
  courseType: '',
  startTime: '',
  endTime: '',
  status: '',
  password: '',
  maxStudents: 0,
  currentStudents: 0,
  remark: '',
  isDeleted: 0,
  version: 0,
  createdBy: '',
  createdAt: '',
  updatedBy: '',
  updatedAt: '',
  coachName: ''
})

// 加载详情
const loadDetail = async () => {
  try {
    const res = await getLessonAPI(route.params.id as string)
    lesson.value = res.data
  } catch (error) {
    Toast.fail('加载失败')
    router.go(-1)
  }
}

// 课程类型文本
const courseTypeText = computed(() => {
  const map: Record<string, string> = {
    '1': '科目一',
    '2': '科目二',
    '3': '科目三',
    '4': '科目四'
  }
  return map[lesson.value.courseType] || '未知课程'
})

// 状态文本和标签类型
const statusText = computed(() => {
  const map: Record<string, string> = {
    '1': '可预约',
    '2': '已满',
    '3': '不可约'
  }
  return map[lesson.value.status] || '未知'
})

const statusTagType = computed(() => {
  const map: Record<string, string> = {
    '1': 'success',
    '2': 'warning',
    '3': 'danger'
  }
  return map[lesson.value.status] || ''
})

// 处理预约
const handleReserve = async () => {
  try {
    await reserveLesson(lesson.value.id)
    Toast.success('预约成功')
    loadDetail() // 刷新数据
  } catch (error) {
    Toast.fail('预约失败')
  }
}

onMounted(() => {
  loadDetail()
})
</script>

<style lang="less" scoped>
.lesson-detail {
  padding-bottom: 60px;

  .detail-content {
    padding: 15px;

    .basic-info {
      margin-bottom: 20px;
      text-align: center;

      h3 {
        margin: 10px 0;
        font-size: 18px;
        color: #333;
      }

      .time {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 8px 0;
        color: #666;

        .van-icon {
          margin-right: 5px;
        }
      }
    }

    .remark {
      margin-top: 20px;
      padding: 15px;
      background: #f9f9f9;
      border-radius: 8px;

      h4 {
        margin: 0 0 10px;
        font-size: 16px;
        color: #333;
      }

      p {
        margin: 0;
        font-size: 14px;
        color: #666;
        line-height: 1.6;
      }
    }
  }

  .action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    background: white;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  }
}
</style>
